<template>
	<div>
		<!-- {{arrs}} -->
		<div v-for="item in arrs">
			<div class="per_r_title" v-if='item.children.length > 0'>{{item.function}}</div>

			<div class="to">
				<div class="per_group">
					<div class="rli" v-for="item2,index2 in  item.children" v-if='item2.children.length == 0'>
						<!-- {{item2}} -->
						<el-checkbox @change="selectItem(item2,index2)" :value="item2.checkf" :disabled="disabledKey=='管理员'" class="checks">
						</el-checkbox>
						<!-- <input type="checkbox" @change="selectItem(item2,index2)" :value="item2.checkf" class="checks" name="power" id=""> -->
						<div>{{item2.function}}</div>
					</div>

				</div>

				<list-menu style="margin-left: 20px;" v-if='item.children.length > 0' :arr='item.children' :disabledKey="disabledKey"
					v-on:change="change" :addarr="addarr" :value="value" :role="role" :id="id" />
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		// 组件名必写
		name: 'ListMenu',
		props: {
			// 选中的值的属性名，必传
			valueKey: String,
			// 在页面要展示的选项属性名，必传
			labelKey: String,
			// 不可选的唯一标识，如item[disabledKey]未true则不可选择，非必传
			disabledKey: String,
			// 选中的值，必传
			value: Object,
			// 控制展开，不需要传
			expandFlag: {
				type: Boolean,
				default: true
			},
			// 总数据，必传
			arr: Array,
			role: Array,
			addarr: Array,
			id: Number,
			// 不可选提示文字，非必传
			toastText: String
		},
		data() {
			return {
				// 当前级组件已展开的项
				expandArr: [],
				arrs: [],
				changef: false
			}
		},
		watch: {
			arr: {
				handler(newValue, oldValue) {
					this.arrs = this.arr
					this.getrole()
				}
			},
			// role: {
			// 	handler(newValue, oldValue) {
			// 		this.getrole()
			// 	}
			// },
			id: {
				handler(newValue, oldValue) {
					this.changef = true

				}
			},
		},
		created() {
			this.arrs = this.arr
			// this.getrole()
		},
		methods: {
			// 子组件逐级传递选中项
			change(item) {
				this.$emit('change', item)
			},
			init(list) {
				for (var i = 0; i < list.length; i++) {

					if (list[i].children.length > 0) {
						this.init(list[i].children)
					} else {
						this.$set(list[i], 'checkf', false)
						list[i].checkf = false

						this.$forceUpdate()
						for (var j = 0; j < this.addarr.length; j++) {

							if (this.addarr[j].roleId == this.id && this.addarr[j].rightId == list[i].id) {

								this.$set(list[i], 'checkf', true)
								list[i].checkf = true
								this.$forceUpdate()

							}

							this.$forceUpdate()
						}
					}

					this.$forceUpdate()

				}

				this.changef = false

			},

			getrole() {

				console.log('role')
				for (var i = 0; i < this.arr.length; i++) {
					if (this.arr[i].children.length > 0) {
						this.init(this.arr[i].children)
					}
				}
			},
			// 选择
			selectItem(item, i) {
				if (this.$permissions.indexOf(91) == -1) {
					this.$Toast('暂无权限');
					return
				}
				this.$set(item, 'checkf', !item.checkf)
				this.$emit('change', item)
				this.$forceUpdate()
			},
			// 展开
			expandItem(item, i) {
				// console.log(item.children)
				if (item.children && item.children.length) {
					let index = this.expandArr.indexOf(i)
					if (index > -1) {
						this.expandArr.splice(index, 1)
					} else {
						this.expandArr.push(i)
					}
				}
			}
		}
	}
</script>

<style scoped>
	.per_group {
		display: flex;
		flex-wrap: wrap;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		min-width: 500px;

	}

	.checks {
		margin-right: 10px;
		margin-bottom: 0;
	}

	.rli {
		display: flex;
		align-items: center;
		color: #000;
		margin-right: 20px;
		min-width: 100px;
		padding: 15px 0;
	}

	.per_r_title {
		width: 100%;
		min-width: 500px;
		height: 34px;
		background: #EEEEEE;
		border-radius: 6px;
		margin-top: 30px;
		padding-left: 19px;
		font-size: 18px;
		line-height: 34px;
		font-weight: bold;
		color: #000000;
	}
</style>
